<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax请求测试</title>
</head>

<body>
<input id="btn1" type="button" value=-"get无参请求"></input>
<input id="btn2" type="button" value="get有参请求"></input>
<input id="btn3" type="button" value="post无参请求"></input>
<input id="btn4" type="button" value="post有参请求"></input>
<input id="btn5" type="button" value="复杂请求"></input>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        $('#btn1').click(function () {
            $.ajax({
                type: "get",
                url: "http://localhost:8080/ajax/get1",
                data: {},
                dataType: "json",
                success: function (res) {
                    console.log(res);
                },
                error: function (err) {
                    console.log(JSON.stringify(err));
                }
            })
        });

        $('#btn2').click(function () {
            $.ajax({
                type: "get",
                url: "http://localhost:8080/ajax/get2",
                data: {
                    "name": "newlife",
                    "age": 18
                },
                dataType: "json",
                success: function (res) {
                    console.log(res);
                },
                error: function (err) {
                    console.log(JSON.stringify(err));
                }
            })
        });

        $('#btn3').click(function () {
            $.ajax({
                type: "post",
                url: "http://localhost:8080/ajax/post1",
                /**
                 * 后台 java 用 @RequestBody 接收参数
                 * 即使参数为空vo，也不能写成 data: {},
                 * 因为 @RequestBody 接收的是 json 字符串
                 * 而 type: "post" 默认发送的是 json 对象
                 * 因此造成参数类型不匹配错误，无法请求到预期结果！！！
                 *
                 * 若是报 HttpMediaTypeNotSupportedException 错误
                 * 则加上 contentType: "application/json"
                 *
                 * 总结：ajax 请求后台带有 @RequestBody 时
                 * contentType 、 dataType 和 JSON.stringify( obj ) 这三个最好都写上
                 */
                // data: {},
                data: JSON.stringify({}),
                contentType: "application/json",
                dataType: "json",
                success: function (res) {
                    console.log(res);
                },
                error: function (err) {
                    console.log(JSON.stringify(err));
                }
            })
        });

        $('#btn4').click(function () {
            $.ajax({
                type: "post",
                url: "http://localhost:8080/ajax/post2",
                data: JSON.stringify({
                    "address": "luoyang",
                    "hobbies": "dance"
                }),
                contentType: "application/json",
                dataType: "json",
                success: function (res) {
                    console.log(res);
                },
                error: function (err) {
                    console.log(JSON.stringify(err));
                }
            })
        });


        $('#btn5').click(function () {
            $.ajax({
                type: "post",
                url: "http://localhost:8081/ajax/complexRequest",
                /**
                 * 根据上面介绍可以，当 contentType: "application/json" 或者往 header 中添加自定义属性时，为复杂请求
                 * 注：下面 headers 中直接塞值 (eg. 塞 name) 或者使用 beforeSend() 塞值 (eg. 塞 token) 均可
                 *
                 * beforeSend() 介绍如下
                 * beforeSend()是发送请求前可以修改 XMLHttpRequest 对象的函数，例如添加自定义HTTP头。
                 * 在 beforeSend() 中如果返回 false 则可以取消本次 ajax 请求。XMLHttpRequest 对象是惟一的形参。
                 */
                headers: {
                    "name": "newlife"
                },
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", "abc422-45afds-hkjdhk4");
                },
                data: JSON.stringify({
                    "address": "luoyang",
                    "hobbies": "dance"
                }),
                contentType: "application/json",
                dataType: "json",
                success: function (res) {
                    console.log(res);
                },
                error: function (err) {
                    console.log(JSON.stringify(err));
                }
            })
        });
    })
</script>
</body>

</html>